import React, { useState, useEffect } from "react";
import {
  Row,
  Col,
  Space,
  Badge,
  Popover,
  Button,
  Input,
  Image,
  Divider,
  Tabs,
  List,
} from "antd";

interface TopNavigationModuleProps {
  // 主题切换回调函数
  onThemeToggle: (theme: "light" | "dark") => void;

  // 新增：通知 ReactNode
  notificationNode?: React.ReactNode;

  // 控制显示新建按钮的属性
  showCreate?: boolean;

  // 控制显示搜索框的属性
  showSearch?: boolean;
}

const TopNavigation: React.FC<TopNavigationModuleProps> = (props) => {
  // 使用解构赋值获取组件的属性
  const { onThemeToggle, showCreate, showSearch, notificationNode } = props;

  // 状态用于存储关灯状态
  const [isDarkMode, setIsDarkMode] = useState(false);

  // 组件挂载时获取系统主题设置
  useEffect(() => {
    const isSystemDarkMode = () => {
      return window.matchMedia("(prefers-color-scheme: dark)").matches;
    };
    setIsDarkMode(isSystemDarkMode());
  }, []);

  // 主题切换回调函数
  const handleThemeToggle = () => {
    const newTheme = isDarkMode ? "light" : "dark";
    setIsDarkMode(!isDarkMode);
    onThemeToggle(newTheme);
  };

  // 消息提醒点击事件
  const handleNotificationClick = () => {
    // 处理消息提醒点击事件
  };

  // 新建按钮点击事件
  const handleCreateClick = () => {
    // 处理新建按钮点击事件
  };

  // 搜索框值变化事件
  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // 处理搜索框值变化事件
  };

  return (
    <div
      style={{
        width: "100%",
        // height: "100%",
        overflow: "hidden auto",
        backgroundColor: "#ffffff",
      }}
    >
      <Row
        align="middle"
        style={{ height: "64px", justifyContent: "space-between" }}
      >
        <Col>
          <Space size="large">
            {showSearch && (
              <>
                <Image
                  src="/files/502/editor/4442679b27b17af0ee0773afe24df85c26cd.svg"
                  width={20}
                />
                <Input
                  placeholder="搜索文件/事务/检测报告"
                  style={{ width: 500 }}
                  onChange={handleSearchChange}
                />
              </>
            )}
          </Space>
        </Col>
        <Col>
          <Space align="center" size="small">
            {notificationNode}
            {showCreate && (
              <Popover
                content={
                  <Tabs
                    items={[
                      {
                        label: "新建事务",
                        key: "1",
                        children: (
                          <List
                            itemLayout="horizontal"
                            dataSource={[]}
                            renderItem={() => <></>}
                          />
                        ),
                      },
                      {
                        label: "新建检测报告",
                        key: "2",
                        children: (
                          <List
                            itemLayout="horizontal"
                            dataSource={[]}
                            renderItem={() => <></>}
                          />
                        ),
                      },
                    ]}
                  />
                }
                placement="bottom"
              >
                <Button
                  icon={
                    <img
                      src="/files/502/editor/78de6f4ead64405b3826078927c478d92a9e.svg"
                      width={15}
                      height={15}
                    />
                  }
                  onClick={handleCreateClick}
                />
              </Popover>
            )}
            {/* <Button
              icon={
                <img
                  src="/files/502/editor/f08afdc4cb73f3ad42af58689c108434070f.svg"
                  width={20}
                  height={20}
                />
              }
              onClick={handleThemeToggle}
            />
            <Button
              icon={
                <img
                  src="/files/502/editor/bbcf288b80d664e21b703623f0d44e6f4269.svg"
                  width={30}
                  height={30}
                />
              }
            /> */}
          </Space>
        </Col>
      </Row>
    </div>
  );
};

export default TopNavigation;
